<template>
  <div>
    <AHeader />
    <main>
      <ASide />
      <div class="content">
        <ATag />
        <transition name="move" mode="out-in">
          <div>
            <keep-alive :max="20">
              <router-view v-if="$route.meta.keepAlive"></router-view>
            </keep-alive>
            <router-view v-if="!$route.meta.keepAlive"></router-view>
          </div>
        </transition>
      </div>
    </main>
  </div>
</template>

<script setup>
  import ASide from '../../components/ASide.vue'
  import AHeader from '../../components/AHeader.vue'
  import ATag from '../../components/ATag.vue'
</script>

<style>
  main {
    display: flex;
  }

  .content {
    width: 100%;
  }
</style>